// 统一主题样式文件
// 用于确保所有页面的样式一致性

// 颜色变量
:root {
  --primary-color: #00eaff;
  --primary-gradient: linear-gradient(135deg, #00eaff, #0099cc);
  --success-gradient: linear-gradient(135deg, #67c23a, #85ce61);
  --warning-gradient: linear-gradient(135deg, #e6a23c, #f0c78a);
  --danger-gradient: linear-gradient(135deg, #f56c6c, #f78989);
  --info-gradient: linear-gradient(135deg, #909399, #b1b3b8);

  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-hover-bg: rgba(255, 255, 255, 0.08);
  --glass-hover-border: rgba(0, 234, 255, 0.3);

  --text-primary: white;
  --text-secondary: rgba(255, 255, 255, 0.8);
  --text-muted: rgba(255, 255, 255, 0.6);
  --text-placeholder: rgba(255, 255, 255, 0.5);
}

// 统一页面容器样式
.page-container {
  padding: 20px 20px 80px 20px;
  /* 增加底部边距避免Footer遮挡 */
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  min-height: 100vh;
  position: relative;

  &::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
      radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
      radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
  }

  >* {
    position: relative;
    z-index: 1;
  }
}

// 统一玻璃效果
.glass-dialog {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  border-radius: 15px !important;
}

// 统一星空背景
.starry-background {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
      radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
    border-radius: inherit;
  }
}

// 统一发光文字
.glow-text {
  text-shadow: 0 0 20px rgba(0, 234, 255, 0.5) !important;
  color: var(--text-primary) !important;
}

// 统一科技边框
.tech-border {
  border: 1px solid var(--glass-border) !important;
  border-radius: 15px !important;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(45deg, transparent, rgba(0, 234, 255, 0.3), transparent);
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
  }

  &:hover::before {
    opacity: 1;
  }
}

// 统一按钮样式
.tech-button {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text-primary) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.3s ease !important;
  border-radius: 8px !important;

  &:hover {
    background: var(--glass-hover-bg) !important;
    border-color: var(--glass-hover-border) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  }

  &.el-button--primary {
    background: var(--primary-gradient) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 15px rgba(0, 234, 255, 0.3) !important;

    &:hover {
      background: linear-gradient(135deg, #33f0ff, #00b8e6) !important;
      box-shadow: 0 6px 20px rgba(0, 234, 255, 0.4) !important;
    }
  }
}

// 统一输入框样式
.tech-input {
  .el-input__wrapper {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;

    &:hover {
      border-color: var(--glass-hover-border) !important;
    }

    &.is-focus {
      border-color: var(--primary-color) !important;
      box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.1),
        0 0 10px rgba(0, 234, 255, 0.3) !important;
    }

    .el-input__inner {
      color: var(--text-primary) !important;
      background: transparent !important;

      &::placeholder {
        color: var(--text-placeholder) !important;
      }
    }
  }
}

// 统一表格样式
.tech-table {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(20px) !important;

  .el-table__header {
    background: rgba(255, 255, 255, 0.02) !important;

    th {
      background: transparent !important;
      border-color: var(--glass-border) !important;
      color: var(--text-primary) !important;
    }
  }

  .el-table__body {
    tr {
      background: transparent !important;

      &:hover {
        background: rgba(0, 234, 255, 0.1) !important;
      }

      td {
        border-color: var(--glass-border) !important;
        color: var(--text-secondary) !important;
      }
    }
  }
}

// 统一对话框样式
.tech-dialog {
  .el-dialog {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;

    .el-dialog__header {
      background: transparent !important;
      border-bottom: 1px solid var(--glass-border) !important;

      .el-dialog__title {
        color: var(--text-primary) !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
      }

      .el-dialog__headerbtn .el-dialog__close {
        color: var(--text-muted) !important;

        &:hover {
          color: var(--primary-color) !important;
        }
      }
    }

    .el-dialog__body {
      background: transparent !important;
      color: var(--text-primary) !important;
    }

    .el-dialog__footer {
      background: transparent !important;
      border-top: 1px solid var(--glass-border) !important;
    }
  }
}

// 下拉菜单样式已移除，由各页面自定义

// 选择框样式已移除，由各页面自定义

// 选择框样式已移除，由各页面自定义

// 响应式设计
@media (max-width: 768px) {
  .page-container {
    padding: 15px;
  }

  .glass-dialog {
    margin: 10px !important;
    border-radius: 10px !important;
  }
}

// 全局样式已移除，由各页面自定义
